<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>天天生鲜-首页</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/reset.css}" href="../static/css/reset.css">
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}" href="../static/css/main.css">
    <script type="text/javascript" th:src="@{/js/jquery.min.js}" src="../static/js/jquery.min.js"></script>
    <script type="text/javascript" th:src="@{/js/jquery-ui.min.js}" src="../static/js/jquery-ui.min.js"></script>
    <script type="text/javascript" th:src="@{/js/slide.js}" src="../static/js/slide.js"></script>
</head>
<body>
<div class="header_con" th:include="inner::header"></div>
<div class="search_bar clearfix" th:include="inner::search"></div>

<div class="navbar_con">
    <div class="navbar">
        <h1 class="fl">全部商品分类</h1>
        <ul class="navlist fl">
            <li><a href="#" th:href="@{/index}">首页</a></li>
            <li class="interval">|</li>
            <li><a href="#" th:href="@{/list}">新鲜水果</a></li>
            <li class="interval">|</li>
            <li><a href="#">抽奖</a></li>
        </ul>
    </div>
</div>

<div class="center_con clearfix">
    <ul class="subnav fl">
        <th:block th:each="category,row : ${categories}">
            <li><a href="#model01" th:href="${'#model'+row.index}" th:text="${category.name}">新鲜水果</a></li>
        </th:block>
    </ul>
    <div class="slide fl">
        <ul class="slide_pics">
            <li><img th:src="@{/images/slide.jpg}" src="../static/images/slide.jpg" alt="幻灯片"></li>
            <li><img th:src="@{/images/slide02.jpg}" src="../static/images/slide02.jpg" alt="幻灯片"></li>
            <li><img th:src="@{/images/slide03.jpg}" src="../static/images/slide03.jpg" alt="幻灯片"></li>
            <li><img th:src="@{/images/slide04.jpg}" src="../static/images/slide04.jpg" alt="幻灯片"></li>
        </ul>
        <div class="prev"></div>
        <div class="next"></div>
        <ul class="points"></ul>
    </div>
    <div class="adv fl">
        <a href="#"><img th:src="@{/images/adv01.jpg}" src="../static/images/adv01.jpg"></a>
        <a href="#"><img th:src="@{/images/adv02.jpg}" src="../static/images/adv02.jpg"></a>
    </div>
</div>

<th:block th:each="category,row : ${categories}">

    <div class="list_model">
        <div class="list_title clearfix">
            <h3 class="fl" id="model01" th:id="${'model'+row.index}" th:text="${category.name}">新鲜水果</h3>
            <div class="subtitle fl">
                <span>|</span>
                <th:block th:each="subCategory : ${category.children}">
                    <a href="#" th:text="${subCategory.name}">奇异果</a>
                </th:block>
            </div>
            <a href="#" class="goods_more fr" id="fruit_more" th:href="@{/list(categoryId=${category.id})}">查看更多 ></a>
        </div>

        <div class="goods_con clearfix">
            <div class="goods_banner fl"><img src="../static/images/banner01.jpg"
                                              th:src="${category.imageUrl}"/></div>
            <ul class="goods_list fl">
                <th:block th:each="product : ${category.products}">
                    <li>
                        <h4><a href="detail.html" th:href="@{/product/{id}(id=${product.id})}"
                               th:text="${product.name}">草莓</a></h4>
                        <a href="detail.html" th:href="@{/product/{id}(id=${product.id})}" th:title="${product.name}"
                           th:alt="${product.name}">
                            <img src="../static/images/goods/goods003.jpg"
                                 th:src="${product.imageUrl}"/>
                        </a>
                        <div class="prize">¥ <span th:text="${product.price}">10.00</span></div>
                    </li>
                </th:block>
            </ul>
        </div>
    </div>

</th:block>

<div th:include="inner::footer" class="footer"></div>
<script type="text/javascript" src="../static/js/slide.js" th:src="@{/js/slide.js}"></script>
<script type="text/javascript">
    var oFruit = document.getElementById('fruit_more');

    oFruit.onclick = function () {
        window.location.href = 'list.html';
    }
</script>
</body>
</html>